<template>
	<view @click.stop="handleToClick" style="position: relative;">
		<wCard :activeClick="true" marginTop="20" flexDirection="row" align-items="center">
			<image v-if="props.title == '我的预约'" class="leftIcon" src="@/static/personalCenter/ic_wdyy.png"
				mode="widthFix">
			</image>
			<image v-else-if="props.title == '门店入口'" class="leftIcon" src="@/static/personalCenter/ic_mdrk.png"
				mode="widthFix"></image>
			<image v-else-if="props.title == '帮助中心'" class="leftIcon" src="@/static/personalCenter/ic_bzzx.png"
				mode="widthFix"></image>
			<image v-else-if="props.title == '关于我们'" class="leftIcon" src="@/static/personalCenter/ic_gywm.png"
				mode="widthFix"></image>
			<text class="title">{{ title }}</text>
			<image class="rightIcon" src="@/static/personalCenter/ic_right.png" mode="widthFix"></image>

			<u-button v-if="props.title == '关于我们'" open-type="contact"
				customStyle="position: absolute;top:0;bottom:0;left:0;right:0;opacity: 0;"></u-button>
		</wCard>
	</view>
</template>
<script setup>
	import wCard from '@/components/w-card.vue'

	const props = defineProps({
		title: {
			type: String,
			default: () => {
				return '我的预约'
			}
		},
		itemIndex: {
			type: [Object, Number],
			default: () => {
				return -1
			}
		}
	})
	const emits = defineEmits(['itemClickIndex', 'itemClick'])

	const handleToClick = () => {
		emits('itemClick', props.title)
		emits('itemClickIndex', props.itemIndex)
	}
</script>
<style lang="scss" scoped>
	.leftIcon {
		margin-top: 32rpx;
		margin-bottom: 32rpx;
		margin-left: 29rpx;
		width: 34rpx;
		height: 34rpx;
	}

	.title {
		margin-left: 19rpx;
		flex: 1;
		font-size: 32rpx;
		color: #0D0D0D;
	}

	.rightIcon {
		width: 12rpx;
		margin-right: 30rpx;
		height: 21rpx;
	}
</style>